<template>
  <div>
    <app-header
      @switch="tableShow = !tableShow"
    >
    </app-header>
    <XTable
      v-show="tableShow"
      height="calc(100vh - 52px)"
      @save="handleSave"
    />
    <XForm
      v-show="!tableShow"
      :comps="comps"
      :loading="loading"
      height="calc(100vh - 52px)"
      @save="handleSave"
    />
    <x-render-form>
      <div slot="XRenderUsername">username</div>
      <div slot="XRenderUserCard">userCard</div>
    </x-render-form>
  </div>
</template>

<script>
import AppHeader from './AppHeader'
//  字符串压缩解压缩工具
import {deflate, inflate} from 'pako'
// 自定义组件
import XRenderCustomContainer from './components/CustomContainer'
import XRenderForm from '@/libs/components/XRenderForm/XRenderForm'

export default {
  components: {
    XRenderForm,
    AppHeader
  },
  data() {
    return {
      loading: false,
      tableShow: false
    }
  },
  computed: {
    comps: {
      get() {
        return [XRenderCustomContainer]
      }
    }
  },
  methods: {
    handleSave(config) {
      this.$message.success('保存成功啦~')
    },
    handleConfig(config, zip = true) {
      // 1. JSON.stringify转换为字符串
      // 2. encodeURIComponent编码
      // 3. deflate 压缩
      if (zip) {
        return deflate(encodeURIComponent(JSON.stringify(config)))
      }

      // 1. inflate解压
      // 2. decodeURIComponent 解码
      // 3. JSON.parse 转换为对象
      return JSON.parse(decodeURIComponent(inflate(config, {to: 'string'})))
    }
  }
}
</script>
